<%--
  Created by IntelliJ IDEA.
  User: GX200169
  Date: 2022/12/13
  Time: 9:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="css/fullCar.css" />
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/icons.css" />
    <link rel="stylesheet" href="css/table.css" />
    <link rel="stylesheet" type="text/css" href="css/shopCar.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 提交订单项时书籍ID和数量的对象
        let bookIdAndNumList = [];
        // 购物车页面商品总数
        let totalNum=0;
        // 购物车页面商品总价值
        let numSum=0;
        $(function () {
            //选择num和total所在的元素
            let totalsList = $("td > .sTotal");
            for(let i=0;i<totalsList.length;i++){
                let s = totalsList[i].innerHTML;
                let t=s*1;
                totalNum +=t;
            }
            let numList=$("td > input");

            for (let i = 0; i <numList.length; i++) {
                let s = numList[i].value;
                let t= s * 1;
                numSum+=t;
            }
            // 获取展示总和的元素，设置值
            // $(".sum").css("color","red");
            $(".sum:first").html(numSum);
            $(".sum:last").html("￥"+totalNum+"元");


            $("#submitBtn").on("click",function () {
                // 获取所有的被选中的checkBox
                let checkedBook = $(".index2>input[type='checkbox']");
                for (let i = 0; i < checkedBook.length; i++) {
                    let cb = checkedBook[i];
                    if (cb.checked){
                        // v1是选中的id值
                        let v1 = cb.value;
                        // 选中之后要找同行的num值
                        // 所在行
                        var oTr = cb.parentElement.parentElement;
                        // num所在的列的值
                        var numTd = oTr.children[3].children[0].value
                        // 拼接一个字符串 bookId-num
                        let temp = v1+"-"+numTd;
                        bookIdAndNumList.push(temp)
                    }
                }
                // 给h1赋值
                $("#h1").val(bookIdAndNumList);
                $("#form1").submit();
            })

        });
    </script>
</head>
<body>
<!--顶部-->
<div class="top">
    <div class="top_center">
        <ul class="top_bars">
            <li><a href="#">退出</a>|</li>
            <li><a href="#">我的订单<span class="jt_down"></span></a>|</li>
            <li><a href="#">关注杰普<span class="jt_down"></span></a>|</li>
            <li><a href="#">网站导航<span class="jt_down"></span></a></li>
        </ul>
    </div>
</div>
<!--头部-->
<div class="header3">
    <a href="#"><img src="images/logo.png" class="oneImg"></a>


    <div class="h3_right">
        <img src="images/play_03.png" alt="">
    </div>

</div>
<!--中间部分div-->
<div class="empty">
    <div class="peisong"><pre>全部商品  2 </pre></div>
    <div class="mainCenter">
        <div class="allCheck">
            <input type="checkbox"><p>全选</p>
            <p class="leftM">商品</p>
            <p class="rightM">单价(元)</p>
            <p class="leftM">数量</p>
            <p class="leftM">小计(元)</p>
            <p class="leftM">操作</p>
        </div>
        <div class="mainPro">
            <div class="aa">
                <input type="checkbox"><span id="but">自营</span>
            </div>
            <form id="form1" action="confirmOrder" method="post">
                <input id="h1" type="hidden" name="bookIdAndNum" value="">
                <table>
                    <tbody>
                    <c:forEach items="${shopCartList}" var="sc">
                        <tr>
                            <td class="index2">
                                <input type="checkbox" value="${sc.bookId}" name="bookId">
                            </td>
                            <td>
                                <img style="height: 80px;width: 50px" src="${sc.book.image}" >
                                <span>
                                        ${sc.book.name}
                                        <br>
                                </span>
                            </td>
                            <td>
                                <span>¥${sc.book.price}</span>
                            </td>
                            <td class="index2">
                                <input type="text" name="num" value="${sc.num}"><br>
                                <span>有货</span>
                            </td>
                            <td>
                                ¥<span class="sTotal">${sc.total}</span>
                            </td>
                            <td>
                                <button>移出购物车</button>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </form>
        </div>
        <div class="allButtom">
            <p class="caozuo">去结算</p>
            <input id="submitBtn" value="去提交" class="caozuo" type="button">
            <span>共<font class="sum"></font>件商品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总价(不含运费)：<font class="sum"></font></span>
        </div>
    </div>

</div>



<!--脚部-->
<div class="footer3">
    <div class="f3_top">
        <div class="f3_center">
            <div class="ts1">品目繁多 愉悦购物</div>
            <div class="ts2">正品保障 天天低价</div>
            <div class="ts3">极速物流 特色定制</div>
            <div class="ts4">优质服务 以客为尊</div>
        </div>
    </div>
    <div class="f3_middle">
        <ul class="f3_center">
            <li class="f3_mi_li01">
                <h1>购物指南</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>配送方式</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>支付方式</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>售后服务</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>服务保障</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li06">
                <h1>客服中心</h1>
                <img src="images/qrcode_jprj.jpg" width="80px" height="80px">
                <p>抢红包、疑问咨询、优惠活动</p>
            </li>
        </ul>
    </div>
    <div class="f3_bottom">
        <p class="f3_links">
            <a href="#">关于我们</a>|
            <a href="#">联系我们</a>|
            <a href="#">友情链接</a>|
            <a href="#">供货商入驻</a>
        </p>
        <p>沪ICP备14033591号-8 杰普软件briup.com版权所有 杰普软件科技有限公司 </p>
        <img src="images/police.png">
    </div>
</div>
</body>
</html>